<template>
    <div>
      <v-form ref="myBrandForm" v-model="valid" lazy-validation>
        <v-text-field
          v-model="brand.name"
          :rules="nameRules"
          label="请输入品牌名称"
          required
        ></v-text-field>
        <v-text-field
          v-model="brand.letter"
          :rules="letterRules"
          label="请输入品牌首字母"
          required
        ></v-text-field>
        <v-cascader
          url="/item/category/list"
          multiple
          required
          v-model="brand.categories"
          label="请选择商品分类"/>
        <v-layout row>
          <v-flex xs3>
            <span style="font-size: 16px; color: #444">品牌LOGO：</span>
          </v-flex>
          <v-flex>
            <v-upload
              v-model="brand.image"
              url="/upload/image"
              :multiple="false"
              :pic-width="250"
              :pic-height="90"
            />
          </v-flex>
        </v-layout>
        <v-layout  class="my-4" row>
          <v-spacer/>
          <v-btn @click="submit" color="primary">提交</v-btn>
          <v-btn @click="clear" >重置</v-btn>
        </v-layout>
      </v-form>
    </div>
</template>

<script>
    export default {
        name: "MyBrandForm",
      data() {
          return{
            valid:false,
            brand:{
              name: '',
              letter:'',
              image:'',// 品牌logo
              categories:[], // 品牌所属的商品分类数组
            },
            nameRules: [
              v =>!!v || '商品名称不能为空',
              v => v.length>1 || '商品名称大于2个字'
            ],
            letterRules: [
              v => /^[a-z,A-Z]$/.test(v) || '请输入字符'
            ],
          }
      },
      props:{
        olderBrand: Object,
        closeWindow: Function,
        isEdit:Boolean,
        getDataFromServer:Function,
      },
      methods:{
        clear() {
          //重置页面弹窗的数据
          this.$refs.myBrandForm.reset();
          this.brand.categories = [];
        },
        submit() {
          //提交痰喘添加的数据
          if (this.$refs.myBrandForm.validate()) {
            //表单验证通过的情况下
            const {categories,letter,...params} = this.brand;
            //处理数据不统一 的情况
            params.cids=categories.map(category => category.id).join(",");
            //小写字母转大写
            params.letter = letter.toUpperCase();

            this.$http({
              url:"/item/brand",
              data: this.$qs.stringify(params),
              method: this.isEdit?"PUT":"POST",
            }).then(()=>{
              this.closeWindow();
              this.$message.info(this.isEdit?"修改成功":"添加成功");
              //查列表
              this.getDataFromServer();
            }).catch(()=>{
              this.$message.error(this.isEdit?"修改失败":"添加失败");});
          }
        }
        ,
        //编辑数据
      },
      watch:{
        olderBrand(newBrand) {
          if (newBrand) {
            //如果数据不为空的话
            this.brand = Object.deepCopy(newBrand);
            //发送请求,获取服务器地址,传给Mybrand
          } else {
            this.brand={
              //换节点的前
              name: '',
                letter:'',
                image:'',// 品牌logo
                categories:[], // 品牌所属的商品分类数组
            }
          }
        }
      }
    }
</script>

<style scoped>

</style>
